<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
    class="page-nav-bar"
    title="个人信息"
    left-arrow @click-left="$router.back()" />
    <!-- /导航栏 -->
    <input @change="onchange" type="file" hidden ref="inputFile"/>
    <van-cell @click="$refs.inputFile.click()" title="头像" is-link>
      <van-image
        class="avatar"
        fit="cover"
        round
        src="user.pgoto"
      />
    </van-cell>
    <van-cell title="昵称" @click=" isShowEdit=true" :value="user.name" is-link />
    <van-cell title="性别" @click="isShowEditsex=true" :value="user.gender?'女':'男'" is-link />
    <van-cell title="生日" @click="isShowEditbirthday=true"  :value="user.birthday" is-link />
<!-- 编辑头像的弹层 -->
    <van-popup v-model="isShowEditAvatar" :style="{height:'100%'}"  position="bottom"  >
     <!-- <user-editbirthday v-model="user.birthday" @close="isShowEditbirthday=false"/> -->
<user-edit-avatar @close="isShowEditAvatar=false" :img="imgUrl"/>
</van-popup >
<!-- 编辑用户的弹层 -->
    <van-popup v-model="isShowEdit" :style="{height:'100%'}" position="bottom"  >
      <user-edit v-model="user.name" @close="isShowEdit=false"/>
</van-popup >
<!-- 编辑性别的弹层 -->
    <van-popup v-model="isShowEditsex" :style="{height:'100%'}" position="bottom"  >
     <user-editsex v-model="user.gender" @close="isShowEditsex=false"/>
      <!-- <user-edit v-model="user.name" @close="isShowEdit=false"/> -->
</van-popup >
<!-- 编辑生日的弹层 -->
    <van-popup v-model="isShowEditbirthday" :style="{height:'100%'}" position="bottom"  >
     <user-editbirthday v-model="user.birthday" @close="isShowEditbirthday=false"/>
      <!-- <user-editbirthday/> -->
      <!-- <user-edit v-model="user.name" @close="isShowEdit=false"/> -->
</van-popup >

  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UserEdit from '@/views/User/components/UserEdit'
import UserEditsex from '@/views/User/components/UserEditsex'
import UserEditbirthday from '@/views/User/components/UserEditbirthday.vue'
// import UserEditAvatar from '@/views/Uswe/components/UserEditAvatar.vue'
import UserEditAvatar from './components/UserEditAvatar.vue'

export default {
  data () {
    return {
      user: {}, // 保存用户信息
      isShowEdit: false, // 控制编辑弹层
      isShowEditsex: false,
      isShowEditbirthday: false,
      isShowEditAvatar: false,
      imgUrl: ''
    }
  },

  created () {
    this.loadUserProfile()
  },
  components: {
    UserEdit,
    UserEditsex,
    UserEditbirthday,
    UserEditAvatar
  },

  methods: {
    async loadUserProfile () {
      try {
        const res = await getUserProfile()
        console.log(res)
        this.user = res
      } catch (error) {
        console.log('res用户接口获取失败')
      }
    },
    // 选择文件的输入框发生变化 取消时控制台也会打印多一次
    onchange (e) {
      if (e.target.value === '') return
      this.isShowEditAvatar = true
      // 如果不进行裁剪，e.target.files[0] 可以直接交给后端
      this.imgUrl = URL.createObjectURL(e.target.files[0])
      e.target.value = ''
    }

  }
}
</script>

<style scoped lang='less'>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  /deep/.van-nav-bar__arrow {
    color: #fff;
  }
}
</style>
